<template>
	<view class="w-buy-container">
		<view class="w-good-info">
			<image :src="url+good.img[0]" mode="scaleToFill" style="width:250rpx;height:150rpx;margin-right: 20rpx;">
			</image>
			<view class="w-good-desc">
				<text class="w-buy-name">{{good.name}}</text>
				<text class="w-buy-desc">{{good.desc.length>30?good.desc.slice(0,30)+'...':good.desc}}</text>
				<text class="w-buy-price w-price">￥ {{good.price}}</text>
			</view>
		</view>
		<view @click="up" class="w-buy-select-adrs">
			<text>选择收货地址</text>
		</view>

		<view class="w-buy-address2" v-if="delivery.name!=''">
			<view class="name">
				<text>收件人：{{delivery.name}}</text>
			</view>
			<view class="phone">
				<text>电话：{{delivery.phone}}</text>
			</view>
			<view class="ads">
				<text>地址：{{delivery.address}}</text>
			</view>
		</view>
		<view class="w-buy-totle">
			<view class="">
				<text>实付款：</text>
				<text class="w-buy-price">￥{{good.price}}</text>
			</view>
			<view class="w-buy-btn">
				<text @click="onBuy">确认购买</text>
			</view>
		</view>

		<!-- 收获地址选择 -->
		<w-address :adressShow="adressShow" :adressList="adressList" @cancelDialog="cancelDialog"
			@confirmDialog="confirmDialog" @addAddress='addAddress'></w-address>
		<!-- 弹框 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000">
			</uni-popup-message>
		</uni-popup>
		<!-- <button type="default" @click="test">测试</button> -->
	</view>
</template>

<script>
	import config from '../../utils/config.js'; //地址配置文件
	import orderApi from '../../api/orders.js'; //订单接口
	import goodApi from '../../api/goods.js'
	export default {
		name: 'buy',
		data() {
			return {
				adressShow: false,
				good: this.$store.state.goods,
				sell: this.$store.state.goods.userId._id, //卖家
				userId: this.$store.getters['user/get_id'], //买家
				url: config['resource_server'],
				adressList: this.$store.getters['user/get_delivery'],
				delivery: {
					name: '',
					address: "",
					phone: "",
				},
				msgType: "",
				messageText: "",
			}
		},
		onLoad() {

		},
		methods: {
			// 测试
			// test(){
			// 	uni.navigateTo({ //转入我买到的订单页面
			// 		url: '/pages/mine/mineBuy/mineBuy'
			// 	})
			// },
			//购买
			onBuy() {
				if (this.delivery.name == '') {
					this.pop_up({
						type: 'error',
						msg: '请选择收获地址'
					})
				} else {
					const {
						userId,
						sell
					} = this.$data;
					const submit = {
						userId,
						sell,
						articleId: this.good._id,
						address: this.delivery.address,
						cb: ({
							data
						}) => {
							if (data._id) {

								//购买成功后把商品的状态改成已售
								goodApi.update({
									_id: this.good._id,
									status: false,
									cb: (res) => {
										console.log(res)
									}
								})
								this.pop_up({
									type: 'success',
									msg: '订单生成成功'
								});
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/mine/mine',
										success() {
											setTimeout(() => {
												uni.navigateTo({ //转入我买到的订单页面
													url: '/pages/mine/mineBuy/mineBuy'
												})
											},300)
										}
									})
								}, 1000)
							} else { //提交失败

							}
						}
					};
					orderApi.add(submit)
				}
			},
			//唤起
			up() {
				this.adressShow = true;
			},
			//取消
			cancelDialog() {
				this.adressShow = false;
			},
			//确定
			confirmDialog(e) {
				this.delivery = {
					...e
				}
				this.adressShow = false;
			},
			//添加收货地址
			addAddress() {
				uni.navigateTo({
					url: '/pages/address/add/add'
				})
			},
			pop_up({
				type,
				msg
			}) {
				this.msgType = type;
				this.messageText = msg;
				this.$refs.message.open()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.w-buy-container {
		padding: 20rpx 30rpx;
	}

	.w-good-info {
		display: flex;
		background-color: #FFFFFF;
		padding: 10rpx 20rpx;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.w-buy-name {
		font-weight: bold;
	}

	.w-good-desc {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.w-buy-select-adrs {
		margin-top: 20rpx;
		background-color: #78cdd1;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;

		text {
			color: #FFFFFF;
		}
	}

	.w-buy-address2 {
		margin-top: 10rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;

		.phone {
			margin: 10rpx 0;
		}
	}

	.w-buy-price {
		color: #ff4635;
		font-weight: bold;
	}

	.w-buy-btn {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		background-color: #78cdd1;

	}

	.w-buy-totle {
		display: flex;
		position: absolute;
		bottom: 0;
		padding-bottom: 50rpx;
		justify-content: flex-end;
		align-items: center;
		width: 90%;
	}

	.w-buy-btn>text {
		font-size: 30rpx;
		color: #FFFFFF;
		font-weight: bold;
	}

	.w-buy-desc {
		font-size: 30rpx;
		margin: 20rpx;
	}

	page {
		background-color: #f4f4f4;
	}
</style>
